<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>

    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入bootstrap样式 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/section.css">
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap-table.min.js -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue-resource.js" charset="utf-8"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="appSjl">
    <table class="table table-bordered table-striped">
        <tr>
            <td colspan="4">
                <div style="margin-top: 10px; margin-left: 10px">
                    <form class="form-inline" method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label for="teachersName">老师姓名:</label>
                            <input type="text" v-model="formName" class="form-control" style="width: 180px;">
                        </div>
                        <div class="form-group">
                            <label for="ip">科室:</label>
                            <select class="form-control" style="width: 180px;" v-model="selectVal">
                                <option value="0">请选择</option>
                                <option v-for="item in classList" :value="item.sectionsId">{{item.sectionsName}}
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button @click="getTeachersAllSjl">
                                搜索
                            </button>
                        </div>
                    </form>
                </div>
            </td>
            <td colspan="3">
                <div id="app">
                    <button type="button" class="btn btn-info" @click="getTeacherId();show=!show">添加</button>
                    <a href="teachers.html" class="btn btn-success">刷新
                    </a>
                    <jspang :show="show" @closeparent="cl"></jspang>
                </div>
            </td>
        </tr>
        <tr>
            <th>老师ID</th>
            <th>老师卡号</th>
            <th>老师名称</th>
            <th>老师性别</th>
            <th>所属科室</th>
            <th>老师备注</th>
            <th>操作</th>
        </tr>
        <tr v-for="teacher in teacherList">
            <td>{{teacher.teachersId}}</td>
            <td>{{teacher.teachersCardNo}}</td>
            <td>{{teacher.teachersName}}</td>
            <td>{{teacher.teachersSex}}</td>
            <td>{{teacher.sections.sectionsName}}</td>
            <td>{{teacher.teachersRemark}}</td>
            <td>
                <button type="button" class="btn btn-info btn-xs"
                        @click="getTeacherId();getRowId(teacher.teachersId);show=!show">编辑
                </button>
                <button type="button" class="btn btn-danger btn-xs" @click="deleteSjl(teacher.teachersId)">删除</button>
            </td>
        </tr>

    </table>
    <div class="center">
        <el-pagination :current-page="current" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-sizes="[10,20,30]" :page-size="pageSize" :pager-count="11"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="pageCount">
        </el-pagination>
    </div>
</div>
<template id="dialog">
    <div v-if="show" class="mask" width="400px">
        <div class="content">
            <button @click="close" id="close">x</button>
            <div>
                <form method="post" onsubmit="return false">
                    <h3>添加老师信息</h3>
                    <div class="form-group">
                        <label for="inputEmail30" class="col-sm-2 control-label">老师名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="rowtemplate.teachersName" id="inputEmail30"
                                   placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">老师性别</label>
                        <div class="col-sm-10">
                            <select class="form-control" v-model="rowtemplate.teachersSex" id="inputEmail3">
                                <option value=""></option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail31" class="col-sm-2 control-label">所属科室</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="inputEmail31" v-model="rowtemplate.sectionsId">
                                <option :value="1">后勤科</option>
                                <option :value="2">数学部</option>
                                <option :value="3">英语部</option>
                                <option :value="5">后勤部</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail32" class="col-sm-2 control-label">老师备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="rowtemplate.teachersRemark"
                                   id="inputEmail32" placeholder="Email">
                        </div>
                    </div>

                    <button type="submit" class="btn btn-info" @click="addSjl">提交</button>
                    <button type="reset" class="btn btn-danger">重置</button>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
    // dialog组件
    var jspang = {
        props: ["show"],
        template: `#dialog`,
        data: function () {
            return {
                teachersList: [],
                rowtemplate: {
                    teachersId: 0,
                    teachersName: "",
                    teachersSex: "",
                    sectionsId: 0,
                    teachersRemark: ""
                }
            }
        },
        methods: {
            addSjl: function () {

                if (sec.teachersId == 0) {
                    //设置当前新增行的Id
                    ajax({
                        url: "/teachers/createTeachersSjl", //请求地址
                        data: this.rowtemplate,
                        dataType: "jsonp",
                        success: function (result) { //服务器返回的结果
                            if (result.code == 0) {
                                alert(result.msg);
                                window.location.href = "";
                            } else {
                                alert(result.msg);
                            }
                        }
                    })
                } else {
                    ajax({
                        url: "/teachers/updateTeachersSjl", //请求地址
                        data: {
                            teachersId: sec.teachersId,
                            teachersName: this.rowtemplate.teachersName,
                            teachersSex: this.rowtemplate.teachersSex,
                            sectionsId: this.rowtemplate.sectionsId,
                            teachersRemark: this.rowtemplate.teachersRemark,
                        },
                        dataType: "jsonp",
                        success: function (result) { //服务器返回的结果
                            if (result.code == 0) {
                                alert(result.msg);
                                window.location.href = "";
                            } else {
                                alert(result.msg);
                            }
                        }
                    })
                }
            },
            close() {
                this.$emit("closeparent");
            }
        }
    }
    var sec = new Vue({
        el: '#appSjl',
        data: {
            teacherList: [],
            show: false,
            teachersId: 0,
            teachersList: [],
            classList: [],
            pageSize: 10,
            pageCount: 100,
            current: 0,
            sectionsId: [],
            //条件区的select
            selectVal: '',
            //条件区的name
            formName: ''
        },
        mounted: function () { //钩子函数
            this.getTeachersAllSjl();
            this.getClassList();
        },
        components: {
            jspang
        },
        methods: {
            getTeachersAllSjl: function () {
                ajax({
                    url: "/teachers/selectTeachersSjl", //请求地址
                    dataType: "jsonp",
                    data: { //需要携带的参数
                        current: this.current,
                        size: this.pageSize,
                        teachersName: this.formName,
                        sectionsId: this.selectVal
                    },
                    success: function (result) { //服务器返回的结果
                        console.log(result.records);
                        sec.teacherList = result.records; //将结果赋值给 msg
                        sec.pageCount = result.total;
                        sec.current = result.current;
                    }
                })
            },
            getClassList: function () {
                ajax({
                    url: "/sections/getAll", //请求地址
                    dataType: "jsonp",
                    data: { //需要携带的参数

                    },
                    success: function (result) { //服务器返回的结果
                        sec.classList = result; //将结果赋值给 classList
                    }
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getTeachersAllSjl();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.getTeachersAllSjl();
            },
            getTeacherId() {
                this.$http.post('/teachers/selectTeachersSjl', {}).then(
                    function (res) {
                        this.teachersList = res.data.data;
                        console.log(this.teachersList.sectionsId);
                    },
                    function (res) {
                        console.log(res.status);
                    })
            },
            getRowId(teachersId) {
                if (teachersId < 1) {
                    return teachersId = 0;
                } else {
                    return this.teachersId = teachersId;
                }


            },
            deleteSjl: function (teachersId) {
                var r = confirm('您确认删除吗？');
                if (r == true) {
                    ajax({
                        type: "post",
                        url: "/teachers/deleteTeachersSjl", //请求地址
                        dataType: "jsonp",
                        data: { //需要携带的参数
                            teachersId: parseInt(teachersId)
                        },
                        success: function (result) { //服务器返回的结果
                            if (result.code == 0) {
                                alert(result.msg);
                                window.location.href = "";
                            } else {
                                alert(result.msg);

                            }
                        }
                    })
                }

            },
            cl() {
                this.show = false;
            }
        }
    })

</script>
</body>
</html>
